
<style lang="scss" scoped>
.container {
  position: fixed;
  width: 100%;
  top: 70px;
  bottom: 0;
  background: #f3f3f3;
  overflow: auto;
  padding: 0 12px 100px;
  .box-status {
    width: 100%;
    height: 70px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 12px;
    border-bottom: 1px solid #e5e5e5;
  }
  .address {
    width: 100%;
    height: 108px;
    background: #fff;
    padding: 15px 0px;
    box-sizing: border-box;
    border-radius: 3px;
    position: relative;
    margin-top: 10px;
    p.p-12 {
      padding-left: 12px;
    }
    .address-phone {
      font-size: 12px;
      color: rgba(102, 99, 99, 1);
      margin-top: 6px;
      padding-left: 12px;
    }
    .wrap-del {
      width: 100%;
      height: auto;
      position: relative;
      margin-top: 5px;
      font-size: 14px;
      margin-bottom: 5px;
      box-sizing: border-box;
      padding-left: 12px;
      .wrap-del__bg {
        width: 8px;
        height: 10px;
        vertical-align: top;
        background: url("/static/ethel_img/shop/order_icon_location@2x.png")
          center center no-repeat;
        background-size: 100% 100%;
        margin-right: 10px;
      }
    }
    > i {
      position: absolute;
      width: 100%;
      height: 2px;
      background: url("/static/ethel_img/shop/order_img_adorn.png") center
        center no-repeat;
      background-size: 100% 100%;
    }
  }
  .wrap-box {
    width: 100%;
    height: auto;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px;
  }
  .wrap-box__tit {
    width: 100%;
    height: 43px;
    line-height: 43px;
    text-align: right;
    padding-right: 12px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    span {
      position: absolute;
      left: 10px;
    }
  }
  .pro {
    width: 100%;
    height: auto;
    position: relative;
    li {
      padding: 12px;
      box-sizing: border-box;
      img {
        width: 84px;
        height: 84px;
        display: block;
        margin-right: 12px;
      }
      .pro-cart {
        height: 40px;
        line-height: 40px;
        position: relative;
        > span {
          font-weight: bold;
          font-size: 16px;
        }
        > font {
          font-size: 10px;
          position: absolute;
          right: 10px;
          color: rgba(160, 154, 155, 1);
        }
      }
    }
  }
}
footer {
  height: 50px;
  line-height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 0;
  > div {
    text-align: right;
    padding-right: 10px;
    color: rgba(160, 154, 155, 1);
  }
  > button {
    outline: none;
    height: 100%;
    display: block;
    width: 125px;
    border: none;
    margin-right: 10px;
  }
}
.first-btn {
  border-right: 1px solid #fff;
  background: #fff;
  color: #333;
  border: 1px solid #e5e5e5;
}
span.integral::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("/static/ethel_img/order_icon_integral.png") center center
    no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
}
.logistBox {
  width: 100%;
  height: auto;
  padding: 12px;
  background: #fff;
  p {
    height: 30px;
    line-height: 30px;
  }
  ul {
    height: auto;
    li {
      position: relative;
      padding-left: 20px;
      padding-bottom: 10px;
      &::before {
        width: 10px;
        height: 10px;
        max-height: 10px;
        border-radius: 50%;
        content: "";
        display: inline-block;
        background: #cccccc;
        margin-top: 2px;
        margin-right: 10px;
        position: absolute;
        left: 0px;
        background: #ffa1b0;
        z-index: 100;
      }
      &::after {
        width: 1px;
        height: 100%;
        content: "";
        display: inline-block;
        background: #cccccc;
        margin-top: 2px;
        margin-right: 10px;
        position: absolute;
        left: 4px;
        top: 0px;
      }
      span {
        font-size: 10px;
        color: #a09a9b;
      }
    }
  }
}
.totalBox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  position: relative;
  span {
    position: absolute;
    right: 10px;
  }
}
.orderno-box {
  height: auto;
  position: relative;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
  padding: 0 12px;
  p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 11px;
    font-weight: bold;
    span {
      color:rgba(102,99,99,1);
      font-weight: 400;
    }
  }

}
.f-w {
  font-weight: 600
}
</style>
<template>
  <div class="withdrawal">
    <ComHeader title="订单详情" leftArrow="true"/>
    <div class="container" v-if="drawalList">
      <div class="box-status flex-display flex-center-align">
        <div
          class="flex-num-one f-w"
        >{{drawalList.status == '待支付' ? '等待付款': drawalList.status == '待发货' ? '买家已付款' : drawalList.status == '待收货' ? '卖家已发货' : '交易成功'}}</div>
      </div>
      <div class="logistBox" v-if="drawalList && drawalList.tracking_number && logObj">
        <p>物流信息</p>
        <ul>
          <li>
            <p class="text-wrap flex-num-one text-overflow-2">{{logObj.status}}</p>
            <span>{{logObj.time}}</span>
          </li>
        </ul>
      </div>
      <div class="address" v-if="drawalList.site_name">
        <p class="p-12">收货人信息</p>
        <p class="address-phone p-12">
          <span>{{drawalList.site_name}}</span>
          <span>{{drawalList.site_phone}}</span>
        </p>
        <div class="wrap-del flex-display flex-center-align">
          <span class="wrap-del__bg"></span>
          <p
            class="flex-num-one text-overflow-2 f-14"
          >{{drawalList.site_province}} {{drawalList.site_city}}{{drawalList.site_quxian}}{{drawalList.site_address}}</p>
        </div>
        <i></i>
      </div>
      <div class="wrap-box">
        <p class="wrap-box__tit f-14">
          <span>{{drawalList.shop_name}}</span>
          {{drawalList.all_count}}件商品
        </p>
        <ul class="pro">
          <li class="flex-display" v-for="(cel, index) in drawalList.goods_type" :key="index">
            <img :src="cel.photo">
            <div class="flex-num-one">
              <p class="f-12 text-overflow-2">{{cel.describe}}</p>
              <div class="pro-cart">
                <span
                  class="theme-color"
                  v-if="cel.goodsrebate[0].pay_type  == '微信'"
                >￥{{cel.discount_price}}</span>
                <span class="theme-color integral" v-else>{{cel.discount_price}}积分</span>
                <font>x{{cel.buy_count}}</font>
              </div>
            </div>
          </li>
        </ul>
        <div class="totalBox" v-if="drawalList.pay_type == '微信'">
          商品总金额
          <span>￥{{drawalList.all_count * drawalList.goods_type[0].discount_price}}</span>
        </div>
        <div class="totalBox" v-else>
          商品总积分
          <span>{{drawalList.all_count * drawalList.goods_type[0].discount_price}}积分</span>
        </div>
        <div class="totalBox">
          邮费
          <span>{{drawalList.postage}}</span>
        </div>
        <div class="totalBox" style="border-top: 1px solid #e5e5e5;">
          <span v-if="drawalList.pay_type == '积分'" class="f-w">实付款 {{drawalList.all_count * drawalList.goods_type[0].discount_price}}积分</span>
          <span v-else class="f-w">实付款 ￥{{drawalList.payment_amount}}</span>
        </div>
      </div>
      <!--订单号 box-->
      <div class="orderno-box">
        <p><span>订单编号：</span>{{drawalList.order_no}}</p>
        <p><span>快递单号：</span>{{drawalList.tracking_number?drawalList.tracking_number:'无'}}</p>
        <p><span>下单时间：</span>{{drawalList.add_time}}</p>
        <p><span>支付方式：</span>{{drawalList.pay_type}}</p>
        <p v-if="drawalList.get_logistics_company"><span>配送方式</span>{{drawalList.get_logistics_company}}</p>
      </div>
    </div>
    <footer class="flex-display">
      <div class="flex-num-one">
        <span class="theme-color"></span>
      </div>
      <template v-if="drawalList && (drawalList.status == '待支付' || drawalList.status == '待发货')">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(1)">取消订单</button>
        <button
          class="theme-background"
          v-if="drawalList.status == '待支付'"
          @click="fnHandleOrderStatus(2)"
        >支付</button>
      </template>
      <template v-if="drawalList && drawalList.status == '待收货'">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(3)">查看物流</button>
        <button class="theme-background" @click="fnHandleOrderStatus(4)">确认收货</button>
      </template>
      <template v-if="drawalList && drawalList.status == '待评价'">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(3)">查看物流</button>
        <button class="theme-background" @click="fnHandleOrderStatus(5)">评价</button>
      </template>
    </footer>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, Indicator, MessageBox } from "mint-ui";
export default {
  data() {
    return {
      isHasMore: true, // 是否需要上拉加载
      drawalList: null, // 数据
      logObj: null // 物流数据
    };
  },
  created() {
    this.fnGetOrderDetail();
  },
  methods: {
    /**
     * @author yang
     * @desc 处理订单的各种情况
     * @param {Number} _num 当前数字 1 取消订单 2 支付 3 查看物流 4确认收货 5评价
     */
    fnHandleOrderStatus(_num) {
      switch (_num) {
        case 1:
          // 取消订单
          this.fnCancelOrder();
          break;
        case 2:
          // 支付
          this.fnOpenNewPay();
          break;
        case 3:
          // 查看物流
          this.fnOpenLogistics();
          break;
        case 4:
          // 确认收货
          this.fnSuregetgoods();
          break;
        default:
          this.fnOpenEvaluation()
          break;
      }
    },

     /**
     * @desc 打开发布评价页面
     * @params {Object}  item 订单对象
     */
    fnOpenEvaluation() {
      this.$router.push({
        path: 'NewEvaluation',
        query: {
          order_no: this.drawalList.order_no
        }
      })
    },

    /**
     * @desc 查看物流
     */
    fnOpenLogistics() {
      this.$router.push({
        path: "NewLogistics",
        query: {
          number: this.drawalList.tracking_number,
          photo: this.drawalList.goods_type[0].photo
        }
      });
    },

    /**
     * @desc 处理收货
     * @params {Object}  item 订单对象
     */
    fnSuregetgoods(item) {
      let _this = this;
      MessageBox.confirm("确定收货?").then(action => {
        let params = {
          order_code: this.drawalList.order_no,
          uid: this.$route.query.uid
        };
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
        api
          .suregetgoods(params)
          .catch(res => {
            console.log(res);
            Indicator.close();
            if (res.status == 200 && !res.data.code) {
              Toast({
                message: "确定收货成功",
                position: "middle",
                duration: 2000
              });
              _this.fnGetOrderDetail();
            }
          })
          .then(err => {
            Indicator.close();
          });
      });
    },

    /**
     * @desc 处理支付
     * @params {Object}  item 订单对象
     */
    fnOpenNewPay(item) {
      let params = {
        total: parseInt(
          this.drawalList.goods_type[0].buy_count *
            this.drawalList.goods_type[0].discount_price
        ).toFixed(2),
        order_no: [this.drawalList.id],
        uid: this.$route.query.uid
      };
      window.localStorage.setItem(
        "pay_type",
        this.drawalList.pay_type == "微信" ? 1 : 2
      );
      this.$router.push({
        name: "NewPay",
        params: params
      });
    },

    /**
     * @author yang
     * @desc 取消订单
     */
    fnCancelOrder() {
      let _this = this;
      MessageBox.confirm("确定取消该订单?").then(action => {
        let params = {
          order_no: this.drawalList.order_no,
          uid: this.$route.query.uid
        };
        api
          .cancelorder(params)
          .catch(res => {
            console.log(res);
            if (res.status == 200 && !res.data.code) {
              Toast({
                message: "取消订单成功",
                position: "middle",
                duration: 2000
              });
              let time = setTimeout(() => {
                clearTimeout(time);
                this.$router.go(-1);
              }, 2000);
            }else{
              Toast({
                message: res.data.msg,
                position: "middle",
                duration: 2000
              });
            }
          })
          .then(err => {});
      });
    },

    /**
     * @author yang
     * @desc 获取订单详情
     */
    fnGetOrderDetail() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        is_detail: "yes",
        order_no: this.$route.query.order_no,
        uid: this.$route.query.uid
      };
      api
        .getOrderDetail(params)
        .catch(res => {
          console.log(res);
          if (res.status === 200 && !res.data.code) {
            this.drawalList = res.data.data[0];
            console.log(this.drawalList);
            if (this.drawalList.tracking_number) {
              this.fnGeLogistData(this.drawalList.tracking_number);
            }
          }
          Indicator.close();
        })
        .then(err => {});
    },

    /**
     * @desc 获取物流信息
     * @author yang
     */
    fnGeLogistData(_number) {
      let params = {
        type: "zto",
        no: _number
      };
      let _url = "https://wuliu.market.alicloudapi.com/kdi";
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      api
        .getLogistics(params, _url)
        .then(res => {
          Indicator.close();
          console.log(res);
          if (
            res.status == 200 &&
            res.data.status == 0 &&
            res.data.result.list.length
          ) {
            this.logObj = res.data.result.list[0];
          }
        })
        .catch(err => {
          Indicator.close();
          console.log(err);
        });
    },

    // 获取数据
    getTxRecord(isMore = false) {
      const params = {
        page: this.page,
        limit: this.limit,
        username: this.getUserId()
      };
      api.getTxRecord(params).catch(res => {
        if (res.status === 200) {
          if (!isMore && this.$refs.suggest) {
            this.$refs.suggest.scrollTo(0, 0);
          }
          this.drawalList = !isMore
            ? res.data.results
            : [...this.drawalList, ...res.data.results];
          this.isHasMore = res.data.next ? true : false;
          this.previous = res.data.next;
        }
      });
    },
    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.previous) {
        this.page++;
        this.getTxRecord(true);
      }
    }
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    Indicator,
    MessageBox
  }
};
</script>
